<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_shop.searchCoupon }}</view>
				<view></view>
			</view>
			
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 列表 -->
		<view style="padding: 0 40rpx;">
			<view
			class="card-box u-m-t-54">
				<view class="u-f-38 u-lh-52 font-medio">{{ lang_shop.couponCode }}</view>
				<view class="u-m-t-20 input-container">
					<input
					v-model="keyword"
					 :placeholder="lang_shop.couponCodeTips"/>
				</view>
			</view>
			
			<view style="margin-top: 100rpx;">
				<x-common-btn
				width="670"
				background="#FD1E43"
				@click="searchAction">
					<view>{{ lang_common.searchOf }}</view>
				</x-common-btn>
			</view>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx"></view>
	</view>
</template>

<script>
	import { couponCouponOrderInfo } from '@/api/merchant/coupon.js'
	export default {
		data() {
			return {
				keyword: '',
				
				timer: null
			}
		},
		methods: {
			searchAction() {
				if (!this.keyword) return this.$api.msg(this.lang_shop.couponCodeTips)
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					couponCouponOrderInfo({ couponSn: this.keyword }).then((result) => {
						uni.navigateTo({
							url: `/pages/shop/coupon/search/list/list`,
							success: res => {
								res.eventChannel.emit('shop-coupon-search', (result))
							}
						})
					})
				}, 300)
			}
		}
	}
</script>

<style scoped lang="scss">
	.input {
		&-container {
			padding: 20rpx 24rpx;
			background-color: #F9F9F9;
			border-radius: 6rpx;
		}
	}
</style>
